<script setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  items: {
    type: Array,
    default: () => [],
  },
})
const dataSource = computed(() => {
  const source = []
  props.items.forEach((item) => {
    source.push({
      label: item.label,
      value: props.data[item.key] || '',
      suffix: item.suffix || '',
    })
  })
  return source
})
</script>

<template>
  <section class="info-card">
    <div class="info-card__title">
      {{ data.parkName || '--' }}
    </div>
    <div v-for="(item, index) in dataSource" :key="index" class="info-card__item" :class="[index % 2 === 1 && 'plural']">
      <div class="info-card__label" :class="item.label.length <= 2 && 'large-space'">
        {{ item.label }}
      </div>
      <div class="info-card__value">
        {{ item.value }} <span v-show="item.value">{{ item.suffix }}</span>
      </div>
    </div>
  </section>
</template>

<style lang='scss' scoped>
.info-card {
  &__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    background-color: #80E3FB33;
    border-radius: 4px;
  }

  &__item {
    display: flex;
    margin-top: 4px;
    font-size: 14px;
  }

  &__label,&__value {
    display: flex;
    align-items: center;
    min-height: 30px;
  }

  &__item.plural &__label,&__item.plural &__value {
    min-height: 50px;
  }

  &__label {
    justify-content: center;
    width: 88px;
    padding: 0 6px;
    color: #80E3FB;
    text-align: center;
    background-color: #80E3FB33;
    border-radius: 4px;

    &.large-space {
      text-align: justify;
      // letter-spacing: 1.5rem;
    }
  }

  &__value {
    flex: 1;
    min-width: 0;
    padding: 0 18px;
    margin-left: 4px;
    background-color: #80E3FB1A;
    border-radius: 4px;
  }
}
</style>
